import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import mesh from './mesh3.js'

//创建场景
const scene = new THREE.Scene()

//创建几何体
const geometry = new THREE.BoxGeometry(100, 100, 100)
//创建材质
const material = new THREE.MeshLambertMaterial({
    color: new THREE.Color('orange')
})
//创建模型 传入几何体和材质
// const mesh = new THREE.Mesh(geometry, material)
//设置模型位置
mesh.position.set(0, 0, 0)
//添加模型到场景
scene.add(mesh)

//创建环境光
const pointLight = new THREE.PointLight(0xffffff, 10000)
//设置环境光位置
pointLight.position.set(80, 80, 80)
//添加环境光到场景
scene.add(pointLight)

//创建坐标轴辅助器 传入坐标轴长度
const axesHelper = new THREE.AxesHelper(200)
//添加坐标轴辅助器到场景
scene.add(axesHelper)

//获取页面宽度高度
const width = window.innerWidth
const height = window.innerHeight
//创建相机 传入相机的角度、宽高比、近平面和远平面
const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000)
//设置相机位置
camera.position.set(200, 200, 200)
//设置相机方向
camera.lookAt(0, 0, 0)
//创建WebGL渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染器尺寸
renderer.setSize(width, height)

function render() {
    //渲染场景和相机
    renderer.render(scene, camera)
    //请求浏览器执行渲染函数
    requestAnimationFrame(render)
}
render()

//将渲染器添加到页面
document.body.append(renderer.domElement)
//创建轨道控制器 传入相机和渲染器
const controls = new OrbitControls(camera, renderer.domElement)